<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>

<div id="app">
    <div style="height: 100px; background-color: brown;">
        <h1 style="text-align: center; line-height: 100px; color: white;">可&nbsp;预&nbsp;约&nbsp;的&nbsp;医&nbsp;生</h1>
    </div>

    <el-steps :active="2" align-center style="margin-top: 20px;">
        <el-step title="步骤一" description="选择要预约的医生和科室"></el-step>
        <el-step title="步骤2" description="请选择可预约的医生"></el-step>
        <el-step title="步骤3" description=""></el-step>
    </el-steps>

    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">

            <el-table-column
                    prop="name"
                    label="医生"
                    width="120" align="center">
            </el-table-column>

            <el-table-column
                    prop="kes.kname"
                    label="科室"
                    width="120" align="center">
            </el-table-column>


            <el-table-column slot-scop="scope"  :label="showDate[0]" align="center">
                <template slot-scope="scope" >
                    <el-button   type="primary" >心理当前可预约人数：{{tableData[scope.$index].shift.peopleA}}<br /><br />当前预约价位：{{tableData[scope.$index].shift.priceA}} 元</el-button>
                    <el-button v-if="scope.row.shift.peopleA != '0'" @click="heartClick(scope.row.id,showDate[0])" type="text" size="small" >预约</el-button>
                    <el-button v-if="scope.row.shift.peopleA == '0'" @click="heartClick1()" type="text" size="small" >预约</el-button>
                </template>
            </el-table-column>

            <el-table-column  :label="showDate[1]" align="center">
                <template slot-scope="scope" >
                    <el-button  type="primary" >当前可预约人数：{{tableData[scope.$index].shift.peopleB}}<br /><br />当前预约价位：{{tableData[scope.$index].shift.priceB}} 元</el-button>
                    <el-button v-if="scope.row.shift.peopleB != '0'" @click="heartClickOne(scope.row.id,showDate[1])" type="text" size="small" >预约</el-button>
                    <el-button v-if="scope.row.shift.peopleB == '0'" @click="heartClick2()" type="text" size="small" >预约</el-button>
                </template>
            </el-table-column>

            <el-table-column  :label="showDate[2]" align="center">
                <template slot-scope="scope" >
                    <el-button   type="primary" >当前可预约人数：{{tableData[scope.$index].shift.peopleC}}<br /><br />当前预约价位：{{tableData[scope.$index].shift.priceC}} 元</el-button>
                    <el-button v-if="scope.row.shift.peopleC != '0'" @click="heartClickTwo(scope.row.id,showDate[2])" type="text" size="small" >预约</el-button>
                    <el-button v-if="scope.row.shift.peopleC == '0'" @click="heartClick3()" type="text" size="small" >预约</el-button>
                </template>
            </el-table-column>

            <el-table-column prop="named" :label="showDate[3]" align="center">
                <template slot-scope="scope" >
                    <el-button  type="primary" >当前可预约人数：{{tableData[scope.$index].shift.peopleD}}<br /><br />当前预约价位：{{tableData[scope.$index].shift.priceD}} 元</el-button>
                    <el-button v-if="scope.row.shift.peopleD != '0'" @click="heartClickThree(scope.row.id,showDate[3])" type="text" size="small" >预约</el-button>
                    <el-button v-if="scope.row.shift.peopleD == '0'" @click="heartClick4()" type="text" size="small" >预约</el-button>
                </template>
            </el-table-column>

        </el-table>
    </template>

</div>

<script>
    var url = location.search;
    var id = url.split("=")[1];
    var haha = new Vue({
        el:"#app",
        data:{
            showDate:[],
            tableData:[]
        },
        methods:{
            heartClick(id,date) {
                window.location.href = "/ssm/yuyue/xinli.html?id="+id + "date="+date;
            },
            heartClickOne(id,date) {
                window.location.href = "/ssm/yuyue/xinliOne.html?id="+id + "date="+date;
            },
            heartClickTwo(id,date){
                window.location.href = "/ssm/yuyue/xinliTwo.html?id="+id + "date="+date;
            },
            heartClickThree(id,date){
                window.location.href = "/ssm/yuyue/xinliThree.html?id="+id + "date="+date;
            },
            heartClick1(){
                this.$alert('<strong>人数已被预约完，请改天预约</strong>', '抱歉', {
                    dangerouslyUseHTMLString: true
                });
            },
            heartClick2(){
                this.$alert('<strong>人数已被预约完，请改天预约</strong>', '抱歉', {
                    dangerouslyUseHTMLString: true
                });
            },
            heartClick3(){
                this.$alert('<strong>人数已被预约完，请改天预约</strong>', '抱歉', {
                    dangerouslyUseHTMLString: true
                });
            },
            heartClick4(){
                this.$alert('<strong>人数已被预约完，请改天预约</strong>', '抱歉', {
                    dangerouslyUseHTMLString: true
                });
            }
        }
    });

    $.get("/ssm/register/breathing?id="+id,function (backData) {
        haha.tableData = backData.data;
    });

    var data1 = new Date();
    var showDate = [];
    for (var i = 1; i <= 7; i++) {
        var date = data1.getDate() < 10 ? '0' + data1.getDate() : data1.getDate();

        var yue = (data1.getMonth() + 1) < 10 ? '0' + (data1.getMonth() + 1) : (data1.getMonth() + 1)
        showDateObj = data1.getFullYear() + '-' + yue + '-' + date ;

        data1.setDate(data1.getDate() + 1);
        haha.showDate.push(showDateObj)
    }
</script>
</body>
</html>